<template>
  <div style="padding: 16px;height: 100%">
    <el-row style="height: 100%" :gutter="12">
      <el-col :span="6" v-for="(item,index) in imgData" :key="index">
        <el-image class="imgbox" :src="imgurl(item.picUrlMin)" :preview-src-list="previewSrcList"
                  :initial-index="index">
          <template #error>
            <div class="image-slot">
              <el-icon>
                <icon-picture/>
              </el-icon>
            </div>
          </template>
        </el-image>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import useView from "@/hooks/useView";
import {defineComponent, reactive, toRefs} from "vue";
import baseService from "@/service/baseService";
import app from "@/constants/app";
import {getToken} from "@/utils/cache";

export default defineComponent({
  name: "PicImg",
  setup() {
    const state = reactive({
      myChart: null,
      id: "",
      imgData: [],
      previewSrcList: []
    });
    return {...useView(state), ...toRefs(state)};
  },
  methods: {
    getInfo(data) {
      if (data.type === "station") {
        this.id = data.id
        this.getPicListById();
      }
    },
    // 获取信息
    getPicListById() {
      this.imgData = [];
      this.previewSrcList = [];
      baseService.get(`/KxStation/kxstation/getPicListById?id=${this.id}`).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.imgData = res.data;
        this.imgData.forEach((i) => {
          this.previewSrcList.push(this.imgurl(i.picUrl));
        })
      });
    },
    imgurl(url) {
      return `${app.api}/KxWarningPic/kxwarningpic/getImage?token=${getToken()}&filePath=` + url;
    }
  }
});
</script>

<style lang="scss" scoped>
.imgbox {
  width: 100%;
  height: 200px;
}
</style>
